<template>
  <div
    class="user"
    :style="{
      backgroundImage: 'url(' + detail.backgroundUrl + ')',
      backgroundSize: '100% 100%',
      backgroundRepeat: 'no-repeat',
    }"
  >
    <div class="tuichu" @click="tuichu">退出登录<van-icon name="arrow" /></div>
    <div class="userdetail">
      <img :src="detail.avatarUrl" alt="" />
      <div class="right">
        <p>
          {{ detail.nickname }} <van-tag type="danger">Lv.{{ level }}</van-tag>
        </p>
        <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa' }" />
        <van-row type="flex" justify="space-around">
          <van-col span="6">
            <p>{{ detail.eventCount }}</p>
            动态
          </van-col>
          <van-col span="6"
            ><p>{{ detail.playlistCount }}</p>
            关注</van-col
          >
          <van-col span="6"
            ><p>{{ detail.playlistBeSubscribedCount }}</p>
            粉丝</van-col
          >
        </van-row>
      </div>
    </div>

    <van-divider content-position="left"
      >至今已听{{ listenSongs }}首歌曲</van-divider
    >
    <div class="Grid">
      <van-grid
        :column-num="4"
        :style="{
          backgroundImage: 'url(' + detail.backgroundUrl + ')',
          backgroundSize: '100% 100%',
          backgroundRepeat: 'no-repeat',
        }"
      >
        <van-grid-item icon="photo-o">
          <van-icon name="play-circle" size="28px" color="red" />
          最近播放
        </van-grid-item>
        <van-grid-item icon="photo-o ">
          <van-icon name="balance-list" size="28px" color="red" />
          本地下载
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-icon name="paid" size="28px" color="red" />
          云盘
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-icon name="gift-card-o" size="28px" color="red" />
          已购
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-icon name="manager-o" size="28px" color="red" />
          我的好友
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-icon name="good-job-o" size="28px" color="red" />
          收藏和赞
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-icon name="video-o" size="28px" color="red" @click="$router.push('/boke')"/>
          我的播客
        </van-grid-item>
        <van-grid-item icon="photo-o">
          <van-icon name="completed" size="28px" color="red" />
          音乐罐子
        </van-grid-item>
      </van-grid>
    </div>
    <div class="sad" @click="$router.push('/faxian')">难过的话就进来听歌吧</div>
  </div>
</template>

<script>
import { getUser,} from "../../api/user";
export default {
  data() {
    return {
      detail: {},
      level: "",
      listenSongs: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    //初始化个人信息
    async inituser(id) {
      const result = await getUser(id);
      console.log(result);
      this.detail = result.profile;
      this.level = result.level;
      this.listenSongs = result.listenSongs;
    },
    //退出登录
    tuichu() {
      localStorage.removeItem("id");
      location.reload();
    },
  
  },
  created() {
    const id = localStorage.getItem("id");
    this.inituser(id);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.tuichu {
  color: white;
  text-align: right;
  padding: 10px;
}
.userdetail {
  display: flex;
  padding: 10px;
  color: white;
}
.userdetail img {
  width: 120px;
}
.right {
  flex: 1;
  padding-left: 10px;
}
.right p {
  margin: 5px;
  font-size: 20px;
  color: #666666;
}
.Grid {
  width: 90vw;
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 7%;
}
.sad {
  width: 90vw;
  height: 8vh;
  margin: 0 auto;
  background-color: white;
  text-align: center;
  line-height: 66px;
  border: 1px solid rgb(235, 237, 238);
  border-radius: 0 0 10px 10px;
  opacity: 0.5;
}
.van-grid-item {
  opacity: 0.5;
}
</style>